<!-- 学管统计 -->
<template>
  <div class="market">
    <el-form label-width="80px" :inline="true">
      <el-form-item label="选择时间">
        <elNiceTime @change="timeChange"></elNiceTime>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="AlltotalStatisticsFn()"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <el-card class="box-card market_t">
      <el-row>
        <el-col
          :span="4"
          v-for="(market, index) in marketDataList"
          :key="index"
        >
          <div
            class="cenFlex market_t_in"
            ref="numberGrow"
            :data-time="3000"
            :data-value="Number(market.num)"
          >
            {{ market.num }}{{ market.nuit || "" }}
          </div>

          <div class="cenFlex market_t_in_title">
            <el-tooltip
              class="item"
              effect="dark"
              :disabled="market.hoverTitle ? false : true"
              :content="market.hoverTitle"
              placement="right"
            >
              <div>{{ market.title }}</div>
            </el-tooltip>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- <el-divider content-position="center">详细数据</el-divider> -->
    <el-tabs v-model="activeName" type="card" :lazy="true">
      <el-tab-pane label="市场人员数据" name="marketingPersonnel">
        <marketingPersonnel
          v-if="activeName == 'marketingPersonnel'"
          :selectEnums="selectEnums.nice_school"
        ></marketingPersonnel>
      </el-tab-pane>
      <el-tab-pane label="代理商数据" name="agent">
        <agent
          v-if="activeName == 'agent'"
          :selectEnums="selectEnums.nice_school"
        ></agent>
      </el-tab-pane>
      <el-tab-pane label="年级数据" name="grade">
        <grade v-if="activeName == 'grade'"></grade>
      </el-tab-pane>
      <el-tab-pane label="地区数据" name="region">
        <region v-if="activeName == 'region'"></region>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  totalStatistics,
  schoolStatistics,
  courseStatistics,
  lessonStatistics,
  tutorStudyStatistics,
  AlltotalStatistics
} from "@/api/operate.js";
import { queryStaffListByType } from "@/api/api.js";
import utils from "@/utils/common.js";
export default {
  components: {
    agent: resolve =>
      require([
        "@/views/modules/operate-center/market/index-list/agent.vue"
      ], resolve),
    grade: resolve =>
      require([
        "@/views/modules/operate-center/market/index-list/grade.vue"
      ], resolve),
    marketingPersonnel: resolve =>
      require([
        "@/views/modules/operate-center/market/index-list/marketing-personnel.vue"
      ], resolve),
    region: resolve =>
      require([
        "@/views/modules/operate-center/market/index-list/region.vue"
      ], resolve),
    elNiceTime: resolve =>
      require(["@/views/modules/operate-center/el-nice-time.vue"], resolve)
  },
  data() {
    return {
      activeName: "marketingPersonnel",
      param: {
        start_time: "",
        end_time: ""
      },
      marketDataList: {},
      selectEnums: {},
      statisticsList: {},
      loadingOnce: true
    };
  },
  created() {
    this.getQueryStaffListByType();
  },

  mounted() {},
  methods: {
    timeChange(val) {
      this.param = {
        ...this.param,
        ...val
      };
      if (this.loadingOnce) {
        this.loadingOnce = false;
        this.AlltotalStatisticsFn();
      }
    },
    // 获取市场负责人以及代理商的数组
    async getQueryStaffListByType() {
      let { nice_school } = this.selectEnums;
      let obj = {};
      let market_id = await queryStaffListByType({ "sys_user.user_type": "6" }); // 市场负责人的列表
      if (market_id[0]) {
        return;
      }
      obj.market_id = market_id[1].data.list;
      obj.market_id.forEach(item => {
        item.label = item.name;
        item.value = item.name;
      });
      let school_agents = await queryStaffListByType({
        "sys_user.user_type": "14"
      }); // 代理商的列表
      if (school_agents[0]) {
        return;
      }
      obj.school_agents = school_agents[1].data.list;
      obj.school_agents.forEach(item => {
        item.label = item.name;
        item.value = item.name;
      });
      this.selectEnums.nice_school = { ...nice_school, ...obj };
    },
    sToHS(s) {
      return utils.sToHS(s);
    },
    // 写入速率返回对应的值
    return_rate(num) {
      return num ? (Number(num) * 100).toFixed(2) : 0;
    },
    // 初始获取总列表
    AlltotalStatisticsFn() {
      let { param } = this;
      AlltotalStatistics(param).then(res => {
        if (res && res[1].code == 0) {
          let statisticsList = res[1].data.statisticsList[0];
          this.marketDataList = [
            {
              num: statisticsList.school_num || 0,
              title: "学校数",
              hoverTitle: "",
              key: ""
            },
            {
              num: statisticsList.total_plan_num || 0,
              title: "拟报名人数",
              hoverTitle: "",
              key: ""
            },
            {
              num: statisticsList.total_sign_up_num || 0,
              title: "总报名人数",
              hoverTitle: "报名成功1个课程以上的学生人数",
              key: ""
            },
            {
              num: this.return_rate(statisticsList.sign_up_rate),
              title: "报名率",
              nuit: "%",
              hoverTitle: "报名人数/拟报名人数",
              key: ""
            },
            {
              num: statisticsList.should_attendance_num || 0,
              title: "应出勤课次",
              hoverTitle: "全部学生所有课程所有讲次有讲次任务的任务数量",
              key: ""
            },
            {
              num: statisticsList.attendance || 0,
              title: "出勤课次",
              hoverTitle: "全部学生全部课程所有讲次有签到的数量",
              key: ""
            },
            {
              num: this.return_rate(statisticsList.attendance_rate),
              title: "课次出勤率",
              nuit: "%",
              hoverTitle: "出勤课次/应出勤课次",
              key: ""
            },
            {
              num: statisticsList.attendance_class_num || 0,
              title: "到课学生数",
              hoverTitle: "所有课程有1讲及以上签到的学生总数",
              key: ""
            },
            {
              num: this.return_rate(statisticsList.attendance_class_rate),
              title: "到课率",
              nuit: "%",
              hoverTitle: "到课的学生人数/报名的学生人数",
              key: ""
            },
            {
              num: statisticsList.join_class_num || 0,
              title: "总参课人数",
              hoverTitle: "所有课程有1讲以上完课的学生人数",
              key: ""
            },
            {
              num: this.return_rate(statisticsList.join_class_rate),
              title: "总参课率",
              nuit: "%",
              hoverTitle: "总参课人数/报名人数",
              key: ""
            },
            {
              num: statisticsList.convert_user_num || 0,
              title: "转化人数",
              hoverTitle: "0付费的学生购买正价课程的人数",
              key: ""
            },
            {
              num: this.return_rate(statisticsList.convert_user_rate),
              title: "转化率",
              nuit: "%",
              hoverTitle: "转化的人数/到课学生数",
              key: ""
            },
            // {
            //   num: statisticsList.convert_period_num || 0,
            //   title: "转化课次数",
            //   hoverTitle: "",
            //   key: "",
            // },
            // {
            //   num: statisticsList.attendance_period_num || 0,
            //   title: "到课学生课次数",
            //   hoverTitle: "转化的人数/到课学生数",
            //   key: "",
            // },
            {
              num: this.return_rate(statisticsList.convert_period_rate),
              title: "课次转化率",
              nuit: "%",
              hoverTitle: "转化课次数/到课学生课次数(1个课程算1个课次)",
              key: ""
            },
            {
              num: statisticsList.renewal_user_num || 0,
              title: "续费人数",
              hoverTitle: "已购买正价课的学生再次购买正价课的人数",
              key: ""
            },
            {
              num: this.return_rate(statisticsList.renewal_user_rate),
              title: "续费率",
              nuit: "%",
              hoverTitle: "续费人数/转化人数",
              key: ""
            },
            // {
            //   num: statisticsList.chinese_convert_num || 0,
            //   title: "语文转化人数",
            //   hoverTitle: "语文下转化的学生人数",
            //   key: "",
            // },
            // {
            //   num: this.return_rate(statisticsList.chinese_convert_rate),
            //   title: "语文转化率",
            //   nuit: "%",
            //   hoverTitle: "语文下转化的学生人数/语文参课的人数",
            //   key: "",
            // },
            {
              num: statisticsList.math_convert_num || 0,
              title: "数学转化人数",
              hoverTitle: "数学下转化的学生人数",
              key: ""
            },
            {
              num: this.return_rate(statisticsList.math_convert_rate),
              title: "数学转化率",
              nuit: "%",
              hoverTitle: "数学下转化的学生人数/数学参课的人数",
              key: ""
            },
            {
              num: statisticsList.english_convert_num || 0,
              title: "英语转化人数",
              hoverTitle: "英语下转化的学生人数",
              key: ""
            },
            {
              num: this.return_rate(statisticsList.english_convert_rate),
              title: "英语转化率",
              nuit: "%",
              hoverTitle: "英语下转化的学生人数/英语参课的人数",
              key: ""
            },
            {
              num: statisticsList.science_convert_num || 0,
              title: "科学转化人数",
              hoverTitle: "科学下转化的学生人数",
              key: ""
            },
            {
              num: this.return_rate(statisticsList.science_convert_rate),
              title: "科学转化率",
              nuit: "%",
              hoverTitle: "科学下转化的学生人数/科学参课的人数",
              key: ""
            },
            {
              num: statisticsList.one_subject_num || 0,
              title: "单科参课人数",
              hoverTitle: "有且只有1个科目的课程参课的人数",
              key: ""
            },
            {
              num: statisticsList.two_subject_num || 0,
              title: "双科参课人数",
              hoverTitle: "有且只有2个科目的课程参课的人数",
              key: ""
            },
            {
              num: statisticsList.three_subject_num || 0,
              title: "三科参课人数",
              hoverTitle: "有且只有3个科目的课程参课的人数",
              key: ""
            }
            // {
            //   num: statisticsList.four_subject_num || 0,
            //   title: "四科参课人数",
            //   hoverTitle: "有且只有4个科目的课程参课的人数",
            //   key: "",
            // },
          ];
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
b {
  font-size: 20px;
}
.cenFlex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fw600 {
  font-weight: 600;
}
.f999 {
  color: #999;
}
.market_t {
  margin-bottom: 20px;
}
.market_t_in {
  width: 100%;
  margin-right: 20px;
  padding: 20px 0px;
  font-size: 40px;
  margin-bottom: 10px;
}
.market_t_in_title {
  color: #999;
  cursor: pointer;
}
</style>
